<!-- 产值查询 -->
<template>
  <view class="container">
    <h4 class="header">组别</h4>
    <uv-input @tap="showSelect" v-model="group" disabled disabledColor="#ffffff" placeholder="请选择组别"> </uv-input>

    <h4 class="header">月份</h4>
    <uv-datetime-picker :formatter="formatter" v-model="value" ref="datetimePicker" mode="year-month" @confirm="confirm"> </uv-datetime-picker>
    <uv-input @tap="open" v-model="dateValue" placeholder="请选择月份" disabled disabledColor="#ffffff"></uv-input>

    <view class="btns">
      <button @click="search" class="button">搜索</button>
      <button @click="reset" class="buttonRS">重置</button>
    </view>

    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th :width="60" align="center">月份</uni-th>
        <uni-th :width="70" align="center">组别</uni-th>
        <uni-th :width="40" align="center">工号</uni-th>
        <uni-th :width="60" align="center">人员</uni-th>
        <uni-th :width="50" align="center">工资</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="item in tableList">
        <uni-td>{{ item.monthAndYear }}</uni-td>
        <uni-td>{{ item.deptName }}</uni-td>
        <uni-td>{{ item.workId }}</uni-td>
        <uni-td @click="userClick(item)" style="color: #3c9cff">{{ item.workName }}</uni-td>
        <uni-td>{{ item.amt }}</uni-td>
      </uni-tr>
    </uni-table>

    <uv-tabbar iconSize="30" :border="false" :value="tabbarValue" @change="tabbarChange">
      <uv-tabbar-item text="报产作业" icon="order"></uv-tabbar-item>
      <uv-tabbar-item text="产值查询" icon="search"></uv-tabbar-item>
      <uv-tabbar-item text="退出" icon="play-right"></uv-tabbar-item>
    </uv-tabbar>

    <uv-action-sheet ref="groupSelect" :actions="groups" title="请选择组别" @select="groupSelect"> </uv-action-sheet>

    <uv-notify ref="notify" type="error"></uv-notify>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      value: Number(new Date()),
      tableList: [],
      groups: [],
      group: "",
      token: "",
      dateValue: this.formatDate(new Date()),
      tabbarValue: 1,
    };
  },
  methods: {
    userClick(row) {
      uni.navigateTo({
        url: "/pages/outputSearch/dateSearch/dateSearch?parentRow=" + JSON.stringify(row),
      });
    },
    confirm(e) {
      this.dateValue = this.formatDate(e.value);
    },
    open() {
      this.$refs.datetimePicker.open();
    },
    // 组别选择
    showSelect() {
      this.$refs.groupSelect.open();
    },
    // 组别选择返回结果
    groupSelect(e) {
      this.group = e.name;
    },
    tabbarChange(index) {
      this.tabbarValue = index;
      if (index === 0) {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
      if (index === 2) {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = "0" + (date.getMonth() + 1); // getMonth()返回的月份是从0开始的，这里添加前导零
      return year + "-" + month.substr(-2); // substr(-2)确保至少取两位数字，避免月份或日期是个位数时的问题
    },
    getTableList() {
      let token = uni.getStorageSync("token");
      uni.request({
        url: "/kl/pad/stitchProducedValue/getProducedValue",
        header: {
          Authorization: token, //自定义请求头信息
        },
        data: {
          deptName: this.group.split("  ")[0],
          deptNo: this.group.split("  ")[1],
          monthAndYear: this.dateValue,
        },
        method: "POST",
        success: (res) => {
          console.log(
            {
              deptName: this.group.split("  ")[0],
              deptNo: this.group.split("  ")[1],
              monthAndYear: this.dateValue,
            },
            res
          );
          if (res.data.code === 200) {
            this.tableList = res.data.data.list;
          } else {
            this.$refs.notify.show({
              message: res.data.message,
            });
          }
        },
      });
    },
    getGroupsList() {
      this.userInfo = uni.getStorageSync("userInfo");
      this.group = this.userInfo.departmentList[0].deptName + "  " + this.userInfo.departmentList[0].deptNo;
      let token = uni.getStorageSync("token");
      uni.request({
        url: "/kl/pad/stitchDate/getDeptNameList",
        header: {
          Authorization: token, //自定义请求头信息
        },
        method: "GET",
        success: (res) => {
          // console.log(res)
          if (res.data.code === 200) {
            for (let i = 0; i < res.data.data.list.length; i++) {
              res.data.data.list[i].name = res.data.data.list[i].deptName + "  " + res.data.data.list[i].deptNo;
            }
            this.groups = res.data.data.list;
          } else {
            this.$refs.notify.show({
              message: res.data.message,
            });
          }
        },
      });
    },
    search() {
      this.getTableList();
    },
    reset() {
      this.group = "";
      this.dateValue = "";
    },
  },
  onShow() {
    this.getGroupsList();
    this.getTableList();
  },
  computed: {
    ...mapState(["hasLogin"]),
  },
};
</script>

<style>
.container {
  padding: 0 30rpx 0;
}

.header {
  margin: 20rpx 0;
}

.btns {
  margin-bottom: 30rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
}
</style>
